<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

    <!--bootstrap-->
    <script src="/js/bootstrap-fileinput/js/fileinput.min.js" type="text/javascript"></script>
    <link href="/js/bootstrap-fileinput/css/fileinput.min.css" type="text/css" rel="stylesheet">
    <script src="/js/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>

</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- 正文区域 -->
<section class="content">
    <div class="box-body">
        <!--tab页-->
        <div class="nav-tabs-custom">
            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->
            <!--tab内容-->
            <div class="tab-content">
                <!--表单内容-->
                <div class="tab-pane active" id="home">
                    <div class="row data-type">
                        <div class="col-md-2 title">商品分类</div>
                        <div class="col-md-10 data">
                            <table>
                                <tr>
                                    <td>
                                        <select class="form-control" id="a1" onchange="two(this.value)">
                                        </select>
                                    </td>
                                    <td>
                                        <select class="form-control select-sm" id="a2"
                                                onchange="tree(this.value)"></select>
                                    </td>
                                    <td>
                                        <select class="form-control select-sm" id="a3"
                                                onchange="four(this.name)"></select>
                                    </td>
                                    <td id="a4">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-2 title">商品名称</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" id="goodsName" placeholder="商品名称" value="">
                        </div>

                        <div class="col-md-2 title">品牌</div>
                        <div class="col-md-10 data">
                            <select class="form-control" id="a5">
                                <option>请先选择分类</option>
                            </select>
                        </div>

                        <div class="col-md-2 title">副标题</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" id="caption" placeholder="副标题" value="">
                        </div>

                        <div class="col-md-2 title">价格</div>
                        <div class="col-md-10 data">
                            <div class="input-group">
                                <span class="input-group-addon">¥</span>
                                <input type="text" class="form-control" id="price" placeholder="价格" value="">
                            </div>
                        </div>

                        <div class="col-md-2 title editer">商品介绍</div>
                        <div class="col-md-10 data editer">
                            <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">包装列表</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea rows="4" class="form-control" id="packageList" placeholder="包装列表"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">售后服务</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea rows="4" id="saleService" class="form-control" placeholder="售后服务"></textarea>
                        </div>
                        <!--回显增加时数据-->
                        <script type="text/javascript">
                            //展示分类数据一级
                            $.ajax({
                                url: "/TbItemCat/TbItemCatshow",
                                data: {parentId: 0},
                                type: "post",
                                dataType: "json",
                                async: false,
                                success: function (pm) {
                                    var s = '<option>请选择分类</option>'
                                    $(pm.data).each(function (i, e) {
                                        s += '<option value="' + e.id + '">' + e.name + '</option>'
                                    })
                                    $("#a1").html(s)
                                    $("#a2").html("");
                                    $("#a3").html("");
                                    $("#a4").html('')
                                    $("#a5").html('<option>请先选择分类</option>')
                                },
                                error: function (pm) {
                                    alert("系统异常")
                                }
                            })


                            function two(id) {
                                //展示分类数据二级
                                $.ajax({
                                    url: "/TbItemCat/TbItemCatshow",
                                    data: {parentId: id},
                                    type: "post",
                                    dataType: "json",
                                    async: false,
                                    success: function (pm) {
                                        var s = '<option>请选择分类</option>'
                                        $(pm.data).each(function (i, e) {
                                            s += '<option value="' + e.id + '">' + e.name + '</option>'
                                        })
                                        $("#a2").html(s)
                                        $("#a3").html("");
                                        $("#a4").html('')
                                        $("#a5").html('<option>请先选择分类</option>')
                                    },
                                    error: function (pm) {
                                        alert("系统异常")
                                    }
                                })
                            }


                            //展示分类数据三级
                            function tree(id) {
                                $.ajax({
                                    url: "/TbItemCat/TbItemCatshow",
                                    data: {parentId: id},
                                    type: "post",
                                    dataType: "json",
                                    async: false,
                                    success: function (pm) {
                                        var s = '<option>请选择分类</option>'
                                        $(pm.data).each(function (i, e) {
                                            s += '<option id="' + e.typeId + '" value="' + e.id + '">' + e.name + '</option>'
                                        })
                                        $("#a3").html(s)
                                        $("#a4").html('')
                                    },
                                    error: function (pm) {
                                        alert("系统异常")
                                    }
                                })
                            }

                            //    回显模板号
                            function four() {

                                $("#a3").find('option').each(function (i, e) {
                                    if ($(e).prop("selected")) {
                                        $("#a4").html("模板ID:<span id='typeTemplateId'>" + $(e).prop("id") + "</span>")
                                        fiv($(e).prop("id"))
                                    }
                                })
                            }

                            //品牌回显//扩展回显
                            function fiv(id) {
                                $.ajax({
                                    url: "/TbTypeTemplate/showbyid",
                                    data: {id: id},
                                    type: "post",
                                    dataType: "json",
                                    async: false,
                                    success: function (pm) {
                                        console.log(pm)
                                        var TbTypeTemplate = pm.data;
                                        var s = ''
                                        $(JSON.parse(TbTypeTemplate.brandIds)).each(function (i2, v2) {
                                            s += '<option value="' + v2.id + '">' + v2.text + '</option>'
                                        })
                                        var ss = ''
                                        $(JSON.parse(TbTypeTemplate.customAttributeItems)).each(function (i, v) {
                                            ss += '<div>'
                                            ss += '<div class="col-md-2 title">' + v.text + '</div>'
                                            ss += '<div class="col-md-10 data">'
                                            ss += '<input class="form-control" placeholder="' + v.text + '">'
                                            ss += '</div>'
                                            ss += '</div>'
                                        })
                                        $("#a5").html(s)
                                        $("#a6").html(ss)
                                        echohuige(id)
                                    },
                                    error: function (pm) {
                                        alert("系统异常")
                                    }
                                })
                            }

                        </script>

                    </div>
                </div>

                <!--图片上传-->
                <div class="tab-pane" id="pic_upload">
                    <div class="row data-type">
                        <!-- 颜色图片 -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建"
                                    data-target="#uploadModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                            </button>
                        </div>
                        <table class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="sorting">颜色</th>
                                <th class="sorting">图片</th>
                                <th class="sorting">操作</th>
                            </thead>
                            <tbody id="echoimg">
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--扩展属性-->
                <div class="tab-pane" id="customAttribute">
                    <div class="row data-type" id="a6">
                        请先选择分类
                    </div>
                </div>

                <!--规格-->
                <div class="tab-pane" id="spec">
                    <div class="row data-type">
                        <div class="col-md-2 title">是否启用规格</div>
                        <div class="col-md-10 data">
                            <input type="checkbox" id="checks">
                        </div>
                    </div>
                    <p>
                    <div>
                        <div class="row data-type" id="asdf">
                            请先选择分类
                        </div>
                        <!--回显规格展示-->
                        <script type="text/javascript">
                            function echohuige(id) {
                                $.ajax({
                                    url: "/TbSpecificationOption/TbSpecificationshowbyid",
                                    data: {id: id},
                                    dataType: "json",
                                    type: "post",
                                    async: false,
                                    success: function (pm) {
                                        var s = ''
                                        $(pm.data.tbSpecificationOptionVOSList).each(function (i, e) {
                                            s += '<div name="specificationName">'
                                            s += '<div class="col-md-2 title">' + e.text + '</div>'
                                            s += '<div class="col-md-10 data"><span>'
                                            $(e.rows).each(function (i1, e1) {
                                                s += '<input type="checkbox"><span> ' + e1.optionName + ' </span>'
                                            })
                                            s += '</div>'
                                            s += '</div>'
                                        });
                                        $("#asdf").html(s)
                                    },
                                    error: function () {
                                        alert("系统错误请找管理员");
                                    }
                                })
                            }
                        </script>
                        <div class="row data-type">
                            <table class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting">屏幕尺寸</th>
                                    <th class="sorting">网络制式</th>
                                    <th class="sorting">价格</th>
                                    <th class="sorting">库存</th>
                                    <th class="sorting">是否启用</th>
                                    <th class="sorting">是否默认</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td> 4.0</td>
                                    <td> 3G</td>
                                    <td><input class="form-control" placeholder="价格"></td>
                                    <td><input class="form-control" placeholder="库存数量" id="am"></td>
                                    <td><input type="checkbox"></td>
                                    <td><input type="checkbox"></td>
                                </tr>
                                <tr>
                                    <td>4.0</td>
                                    <td>4G</td>
                                    <td><input class="form-control" placeholder="价格"></td>
                                    <td><input class="form-control" placeholder="库存数量" id="amm"></td>
                                    <td><input type="checkbox"></td>
                                    <td><input type="checkbox"></td>
                                </tr>
                                <tr>
                                    <td>5.0</td>
                                    <td>3G</td>
                                    <td><input class="form-control" placeholder="价格"></td>
                                    <td><input class="form-control" placeholder="库存数量" id="ammm"></td>
                                    <td><input type="checkbox"></td>
                                    <td><input type="checkbox"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--tab内容/-->
            <!--表单内容/-->
        </div>
    </div>
    <div class="btn-toolbar list-toolbar">
        <button onclick="addTbTypeTemplate()" class="btn btn-primary"><i class="fa fa-save"></i>保存</button>
        <!--<button class="btn btn-default">返回列表</button>-->
    </div>
    <!--数据保存-->
    <script type="text/javascript">
        function addTbTypeTemplate() {
            //获取库存数量
            var p = $("#am").val();
            var pp = $("#amm").val();
            var ppp = $("#ammm").val();
            var stockCount = parseInt(p) + parseInt(pp) + parseInt(ppp)

            //获取所有已选规格
            var find = $("#asdf").find('div');
            var length = find.length;
            var specificationItems = [];
            var ssss = '[';
            for (var i = 0; i < length; i++) {
                if (i % 3 == 1) {
                    ssss += '{"attributeName":' + $($("#asdf").find('div')[i]).text() + ','
                } else if (i % 3 == 2) {
                    ssss += '"attributeValue":['
                    $($($("#asdf").find('div')[i]).find('span')).each(function (i1, e) {
                        if (i1 != 0) {
                            ssss += '"' + $(e).text() + '",'
                        }
                    });
                    if (i == length - 1) {
                        ssss = ssss.substring(0, ssss.length - 1)
                        ssss += ']}]'
                    } else {
                        ssss = ssss.substring(0, ssss.length - 1)
                        ssss += ']},'
                    }
                }
            }
            specificationItems.push(ssss)

            //获取图片信息和图片字符串
            var itemImages = []
            var smallPic;
            $("#echoimg").find('tr').each(function (i, e) {
                smallPic = $($(e).find('td')[1]).find('img').prop('src')
                itemImages.push({
                    "color": $($(e).find('td')[0]).text(),
                    "url": $($(e).find('td')[1]).find('img').prop('src')
                })
            })
            //获取富文本的值
            var content = editor.html();
            //获取是否启用规格
            var isEnableSpec;
            if ($("#checks").prop("checked")) {
                isEnableSpec = 1
            }

            // 获取 扩展属性
            var trList = $("#a6").find("input");
            var arr = [];
            var option = '';
            $(trList).each(function (i, e) { // 循环
                var tr1_1 = e.placeholder;
                var tr1_2 = e.value;
                option = {text: tr1_1, value: tr1_2}
                arr.push(option);
            })
            var cousom = JSON.stringify(arr); // 转换格式成字符串,获取到扩展属性值,并且已拼接
            $.ajax({
                url: "/TbGoods/addTbGoods",
                data: {
                    category1Id: $("#a1").val(),
                    category2Id: $("#a2").val(),
                    category3Id: $("#a3").val(),
                    typeTemplateId: $("#typeTemplateId").html(),
                    brandId: $("#a5").val(),
                    goodsName: $("#goodsName").val(),
                    caption: $("#caption").val(),
                    price: $("#price").val(),
                    packageList: $("#packageList").val(),
                    saleService: $("#saleService").val(),
                    introduction: content,
                    customAttributeItems: cousom,
                    itemImages: JSON.stringify(itemImages),
                    isEnableSpec: isEnableSpec,
                    smallPic: smallPic,
                    specificationItems, specificationItems,
                    title: $("#goodsName").val() + "远峰蓝,4G",
                    sellPoint: content,
                    stockCount: stockCount,
                    num: stockCount,
                    image:smallPic,
                    categoryid:$("#a3").val(),
                    status:2,
                    spec:'{"屏幕尺寸":"6寸","网络制式":"移动3G"}',
                    brand:$("#a5").text()
                },
                dataType: "json",
                type: "post",
                async: false,
                success: function (pm) {
                   alert(pm.message)
                },
                error: function () {
                    alert("系统错误请找管理员");
                }
            })
        }
    </script>
</section>

<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" placeholder="颜色" id="colors"></td>
                    </tr>
                    <tr>
                        <td>商品图片名称</td>
                        <td><input type="text" class="form-control" id="g" placeholder="影视图片"
                                   name="movieImage"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td><input type="file" id="newsImg" name="myFile" multiple/></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button onclick="addimg()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 正文区域 /-->
<script type="text/javascript">
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });

    //点击保存新建图片框
    function addimg() {
        var url = $("#g").val();
        var colors = $("#colors").val();
        var s = ''
        s += '<tr id="removes"><td>' + colors + '</td>'
        s += '<td><img alt="" src="' + url + '" width="100px" height="100px"></td><td>'
        s += '<button onclick="deletes()" type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除 '
        s += '</button></td></tr>'
        $("#echoimg").append(s)
    }

    //删除新建图片框
    function deletes(pm) {
        var note = $("#removes")
        note.remove()
    }

    //整合bootstrapimg上传
    //文件上传
    /*  $('#myFile').fileinput({//获取input的id
          language: 'zh',//需要依赖和插件
          uploadUrl: "/goods/upload",//上传路径
          showCaption: true,
          showUpload: true,
          showRemove: true,
          showClose: true,
          allowedFileExtensions: ['jpg', 'png', 'gif', 'jfif', 'txt', 'pdf', 'xls', 'xlsx'],//可以上传的文件后缀名
          maxFileSize: 40960, //设置文件上传单位kb
          maxFileCount: 5, //最大上传数量
          browseClass: 'btn btn-primary', //按钮样式
          entryType: "multipart/form-data",//文件上传
      });*/
    //上传时，name属性回填给文本框赋值，添加到数据库中
    //上传成功后的回调方法
    /* $('#myFile').on('fileuploaded', function (event, data, previewId, index) {
         // console.log(data)
         if (data.response.code == 666){
             $("#imageUrl").val(data.response.data);//data.response就是返回的信息，data是里面的值
         }
     })*/
    $('#newsImg').fileinput({
        language: 'zh',
        uploadUrl: '/file/upLoadFile',
        enctype: "multipart/form-data",
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jfif', 'txt', 'pdf', 'xls', 'xlsx'],//可以上传的文件后缀名
        maxFileSize: 9999999999, //设置文件上传单位kb
        maxFileCount: 5, //最大上传数量
        browseClass: 'btn btn-primary', //按钮样式
    });
    $('#newsImg').on("fileuploaded", function (event, data, previewId, index) {
        console.log(data.response.data.imgUrl)
        $("#g").val(data.response.data.imgUrl);
    });
</script>
</body>
</html>